<template>
	<div class="relative flex-center wh-full" :style="{ backgroundColor: bgColor }">
		<dark-mode-switch :dark="theme.darkMode" class="absolute left-48px top-24px z-3 text-20px"
			@update:dark="theme.setDarkMode" />
		<n-card :bordered="false" size="large" class="z-4 !w-auto rounded-20px shadow-sm">
			<div class="w-300px sm:w-360px">
				<header class="flex-y-center flex-center">
					<!-- <system-logo class="text-64px text-primary" /> -->
					<n-image :preview-disabled="false" src="/images/logo.png" :alt="$t('system.title')"></n-image>
					<!-- <n-gradient-text type="primary" :size="28">{{ $t('system.title') }}</n-gradient-text> -->
				</header>
				<main class="pt-24px">
					<h3 class="text-18px text-primary font-medium">
						{{ activeModule.label }}
					</h3>
					<div class="pt-24px">
						<transition name="fade-slide" mode="out-in" appear>
							<component :is="activeModule.component" />
						</transition>
					</div>
				</main>
			</div>
		</n-card>
		<login-bg :theme-color="bgThemeColor" />

		<div class="absolute justify-center text-center" style="bottom: 10px; z-index: 99999;">
			<img src="/images/gonganbeian.png" class="inline-block w-16px">
			<a href="https://beian.mps.gov.cn/#/query/webSearch?code=34010402704315"
				style="color: #0066CC;padding-inline: 10px;" rel="noreferrer" target="_blank">皖公网安备34010402704315号</a>
			<a href="https://beian.miit.gov.cn" style="color: #0066CC; padding-inline: 10px;" rel="nofollow"
				target="_blank">皖ICP备17009084号-1</a>
			<br>如有侵权，邮箱联系<a href="mailto:system@tangtu.top" style="color: #0066CC;">system@tangtu.top</a> 2个工作日内删除
			<br>2025 &copy; 谁有我低调 出品
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import type { Component } from "vue";
import { loginModuleLabels } from "@/constants";
import { useThemeStore } from "@/store";
import { getColorPalette, mixColor } from "@/utils";
import { $t } from "@/locales";
import {
	BindWechat,
	CodeLogin,
	LoginBg,
	PwdLogin,
	Register,
	ResetPwd,
} from "./components";

interface Props {
	/** 登录模块分类 */
	module: UnionKey.LoginModule;
}

const props = defineProps<Props>();

const theme = useThemeStore();

interface LoginModule {
	key: UnionKey.LoginModule;
	label: string;
	component: Component;
}

const modules: LoginModule[] = [
	{
		key: "pwd-login",
		label: loginModuleLabels["pwd-login"],
		component: PwdLogin,
	},
	{
		key: "code-login",
		label: loginModuleLabels["code-login"],
		component: CodeLogin,
	},
	{ key: "register", label: loginModuleLabels.register, component: Register },
	{
		key: "reset-pwd",
		label: loginModuleLabels["reset-pwd"],
		component: ResetPwd,
	},
	{
		key: "bind-wechat",
		label: loginModuleLabels["bind-wechat"],
		component: BindWechat,
	},
];

const activeModule = computed(() => {
	const active: LoginModule = { ...modules[0] };
	const findItem = modules.find((item) => item.key === props.module);
	if (findItem) {
		Object.assign(active, findItem);
	}
	return active;
});

const bgThemeColor = computed(() =>
	theme.darkMode ? getColorPalette(theme.themeColor, 7) : theme.themeColor,
);

const bgColor = computed(() => {
	const COLOR_WHITE = "#ffffff";
	const ratio = theme.darkMode ? 0.5 : 0.2;
	return mixColor(COLOR_WHITE, theme.themeColor, ratio);
});
</script>

<style scoped></style>
